<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="ad" :model="ad" label-width="120px" v-loading.fullscreen.lock="fullscreen">
                <el-form-item label="广告标题">
                    <el-input v-model="ad.title"></el-input>
                </el-form-item>
                <el-form-item label="封面图">
                    <el-upload class="avatar-uploader" :data="pic" :action="getLocation" v-loading.fullscreen.lock="fullscreenLoading" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="ad.img" :src="ip+ad.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="tips">建议尺寸: 1280*250像素</span>
                </el-form-item>
                <el-form-item label="正文内容">
                    <quill-editor v-model="ad.content" ref="myEdit"></quill-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add('ad')">保存</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-upload class="upload-demo" :action="getLocation" :before-upload='beforeAvatarUpload1' :data="pic1" :on-success='upScuccess' ref="upload" style="display:none">
            <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
        </el-upload>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { pic_location, ip } from '../../utils/local.js'
import { editBookAd } from '../../api/server.js'
import { mapState } from 'vuex'
import { onSuccess } from '../../utils/quill.js'

export default {
    data() {
        return {
            fullscreen: false,
            fullscreenLoading: false,
            getLocation: pic_location,
            pic: {},
            pic1: {},
            ip: ip
        }
    },
    created() {
    },
    computed: mapState({
        ad: state => state.Third.bookAd
    }),
    methods: {
        videoHandler(state) {
            this.addRange = this.$refs.myEdit.quill.getSelection()
            if (state) {
                document.getElementById('imgInput').click()
            }
            this.uploadType = 'video'
        },
        imgHandler(state) {
            console.log('点击图片', state)
            this.addRange = this.$refs.myEdit.quill.getSelection()
            if (state) {
                document.getElementById('imgInput').click()
            }
            this.uploadType = 'image'
        },
        handleAvatarSuccess(res) {
            if (res.code === '000000') {
                this.fullscreenLoading = false
                // this.ad.img = res.result.resultMap
                this.ad.img = res.result.filePath
            }
        },
        beforeAvatarUpload(file) {
            console.log('上传')
            this.pic.pictureFile = file
            this.pic.width = 1280 * 3
            this.pic.height = 250 * 3
            return this.upload(file)
        },
        beforeAvatarUpload1(file) {
            this.pic1.pictureFile = file
            return this.upload(file)
        },
        upload(file) {
            this.fullscreenLoading = true
        },
        upScuccess(e) {
            onSuccess(this, e)
        },
        add(from) {
            let ad = this.ad
            if (ad.title == undefined || ad.title == '') {
                this.$message.error('请填写标题')
                return
            }
            if (ad.img == undefined || ad.img == '') {
                this.$message.error('请上传封面图')
                return
            }
            editBookAd(ad)
                .then(res => {
                    this.$message.success('修改成功')
                })
        },
        list_handleAvatarSuccess(res) {
            if (res.code === '000000') {
                let obj = {}
                obj.url = res.result.resultMap
                this.filelist.push(obj)
                this.fullscreenLoading = false
            }
        },
        pic_remove(file, filelist) {
            this.filelist = filelist
        },
        back() {
            this.$router.go(-1)
        }
    },
    mounted() {
        this.$refs.myEdit.quill.getModule('toolbar').addHandler('image', this.imgHandler),
            this.$refs.myEdit.quill.getModule('toolbar').addHandler('video', this.videoHandler)
    },
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}
.avatar-uploader {
  width: 1280px;
  height: 250px;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  text-align: center;
  margin-top: 1%;
}
.avatar-uploader .el-upload {
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 1280px;
  height: 250px;
  display: block;
}
.tips {
  color: gray;
  margin-left: 38%;
}
</style>